<template>
  <NvCrud :option :data @refresh="handleRefresh" />
</template>

<script setup lang="ts">
import type { NvCrudOption } from 'nv-crud'
import { NvCrud } from 'nv-crud'

const data = Array.from({ length: 3 }, (_, i) => ({
  id: i + 1,
  name: `name${i + 1}`,
  sex: i % 2 === 0 ? '男' : '女',
  age: i + 1,
}))

const option: NvCrudOption = {
  id: 'toolbar-open-storage',
  // targetStorage: sessionStorage, // 这样设置可改为 sessionStorage
  targetStorage: {
    getItem: (key) => {
      console.warn('getItem', key)
      return Promise.resolve(localStorage.getItem(key))
    },
    setItem: (key, value) => {
      console.warn('setItem', key, value)
      localStorage.setItem(key, value)
    },
    removeItem: (key) => {
      console.warn('removeItem', key)
      localStorage.removeItem(key)
    },
  },
  actionbar: false,
  rowActions: false,
  fields: {
    name: { title: '姓名' },
    sex: { title: '性别' },
    age: { title: '年龄' },
  },
}

function handleRefresh(done: () => void) {
  setTimeout(done, 1000)
}
</script>
